import React from 'react';

import { connect } from 'dva';
import E from 'wangeditor'

import { Card, Divider, Button } from 'antd';

//import OrgEdit from './OrgEdit'

import DescriptionList from '@/components/DescriptionList';

import pic2 from '@/assets/yay.jpg'

const { Description } = DescriptionList;


@connect(({ partnerOrgModel }) => ({ partnerOrgModel }))
class Profile extends React.Component {
  constructor(props, context) {
      super(props, context);
      this.state = {
        editorContent: ''
      }
  }



  async componentDidMount() {
    const elem = this.refs.editorElem
    const editor = new E(elem)
    editor.customConfig.uploadImgShowBase64 = true
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    editor.customConfig.onchange = html => {
      this.setState({
        editorContent: html
      })
    }
    editor.create()

    const { location: {query: { id } } } = this.props;
    if (id) {
      const { dispatch } = this.props;
      await dispatch({
        type: 'partnerOrgModel/view',
        payload:  { id: Number(id) }
      });

      const { partnerOrgModel: { record } } = this.props;

      editor.txt.html(record.notes)

      this.setState({
        editorContent: record.notes
      })
    }
  }

  clickHandle() {
      alert(this.state.editorContent)
  }

  async showForm() {
    const { partnerOrgModel: { record } } = this.props;
    console.log(this.state.editorContent)
    console.log(record)

    const { dispatch } = this.props;

        const vals = {
          notes: this.state.editorContent,
        }

        await dispatch({
          type: 'partnerOrgModel/write',
          payload : {id: record.id, vals } ,
        });

  }

  render() {
    const { partnerOrgModel: { record } } = this.props;

    return (
      <Card bordered={false}>

        <DescriptionList size="large" title='操作控制' style={{ marginBottom: 32 }}>
          <Description >
            <Button onClick={()=>this.showForm()}>保存</Button>
          </Description>

        </DescriptionList>


        <DescriptionList size="large" title='文档信息' style={{ marginBottom: 32 }}>
          <Description term='作者' >{record.name}</Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />

          {/* 将生成编辑器 */}
          <div ref="editorElem" style={{textAlign: 'left'}}>
          </div>
          <button onClick={this.clickHandle.bind(this)}>获取内容</button>

        <DescriptionList>
          <br/>
          <p >
            {"视频示例地址"}
          </p>
          <p >
            {"<iframe src='/movie.mp4' />"}
          </p>
          <p >
            {"<iframe src='http://www.w3school.com.cn/i/movie.mp4'/>"}
          </p>
          <p >
            {"<iframe src='https://sports.qq.com/kbsweb/game.htm?mid=100000:6900'/>"}
          </p>
          <br/>
          <p >
            {"图片示例地址"}
          </p>
          <p > {'/demo.jpg'}
          </p>
          <p > {'https://www.keepon.com.tw/UploadFile/Thread/2015/13493/ebcc4e6c-079c-4a83-bbb6-360a56947d87.jpg'}
          </p>

          <p >
            {pic2}


          </p>


        </DescriptionList>

      </Card>
    );
  }
}

export default Profile;


